{#资产登记页面#}
{% extends "personal_center/zichan_base.html" %}
{% block page_link %}
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
    <link rel="stylesheet" href="../../static/personnel/TimeSelector/skin/jedate.css">
{% endblock %}
{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }

        .file-upload {
            display: none;
        / / 设置上传文件的input隐藏
        }

        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }

        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }

        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }

        #title {
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 10px;
            height: 50px;
            color: #0b0b0b;
            cursor: move;
            /*border: #dfdfdf solid 1px;*/
            width: 100%;
            background: #f4f7fa;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

        #addForm {
            width: 800px;
            height: 620px;
            background: #F5F5F5;
            position: absolute;
            border: #dfdfdf solid 1px;
            margin: auto;
            border-radius: 3px;
            top: 50%;
            left: 50%;
            /* 实现鼠标拖拽使用css3效果 */
            transform: translate(-50%, -50%);
            display: none;
            z-index: 10100;
            font-size: 0;
        }

        .search {
            width: 300px;
            display: flex;
            float: right;
            margin: 10px 0;
            margin-right: 1%;
            /*border: 1px solid red;*/
        }

        .search input {
            vertical-align: middle;
            float: left;
        / / 左浮动 flex: 4;
            height: 30px;
            width: 230px;
            outline: none;
            border: 1px solid #0070c1;
            box-sizing: border-box;
        / / 盒子模型，怪异IE盒子模型，width = content + border * 2 + padding * 2 padding-left: 10 px;
            border-bottom-left-radius: 3px;
            border-top-left-radius: 3px;
        }

        .search button {
            float: right;
            flex: 1;
            height: 30px;
            width: 70px;
            line-height: 30px;
            background-color: #0070c1;
            color: white;
            border-style: none;
            outline: none;
            border-bottom-right-radius: 3px;
            border-top-right-radius: 3px;
        }

        .search button i {
            font-style: normal;
        }

        .search button:hover {
            font-size: 16px;
        }

        .top_tag {
            border-bottom: #01AAED solid 2px;
            color: #01AAED;
        }

        .tab_top {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: inline-block;
            cursor: pointer;
        }

        table tr {
            height: 40px;
            width: 100%;
        }

        .div-tag {
            width: 200px;
            height: 200px;
            display: inline-block;
            vertical-align: top;
            position: relative;
            z-index: 10;
        }

        .p-tag {
            width: 100%;
            height: 40px;
            line-height: 40px;
            position: absolute;
            background: rgba(176, 176, 176, 0.5);
            top: 80px;
            text-align: center;
            display: none;
        }

        .jeinput_1{
            display: inline-block;
            width: 100%;
            padding-left: 10px;
            height: 36px;
            line-height: 34px\9;
            border: 1px solid #e6e6e6;
            background-color: #fff;
            border-radius: 3px;
        }
    </style>
{% endblock %}

{% block right_content %}
    {#    填写资产登记信息#}
    <div class="headline">
        <div class="tab_top">资产登记</div>
        <div style="line-height: 30px; text-align: right;display: inline-block; position: relative;left: 85%">
            <a style="width: 100px; height: 30px; background: #1E90FF; border-radius: 4px;color: #FFFFFF;border: none; text-align: center"
               type="button" onclick="submit_inventory()">
                提交</a>
        </div>
    </div>
    <div style="height: auto; width: 100%; min-height: 95%; padding: 0 15%; background: #FFFFFF">
        <div style="padding: 0 20px 20px 20px">
            <h3 style="font-family: 宋体; text-align: center; padding: 20px 0; font-weight: bold">XXXXXXXX资产登记单</h3>
        </div>
        {#    弹框出所有科室展示供选择单选#}
        <div id="addForm">
            <!-- 标题 -->
            <div id="title">
                <h5 style="line-height: 50px;width: 15%;margin-left: 1%;display: inline-block;font-size: 18px;">
                    物资总览</h5>
                <div class="search"
                     style="vertical-align: center;display: inline-block;text-align: right;margin-left: 35%;font-size: 14px;">
                    <input type="text" placeholder="请输入..." name="" id="search_data" value="">
                    <button onclick="search_dep()" id="search_button">搜索</button>
                </div>
                <span onclick="close_models1()"
                      style="float: right;line-height: 50px;padding-right: 2%;cursor: pointer;"><i
                        class="iconfont icon-quchu"></i></span>
            </div>
            <hr>
            <div id="processed"
                 style="width: 100%;height: 500px;overflow: auto;vertical-align: top;left: 0;padding-left: 2%;">
                {% for product in product_objs %}
                    <div style="display: inline-block;width: 300px;height: 30px;line-height: 30px;font-size: 14px;color: #0b0b0b;">
                        <input class="check_box" id="{{ product.name }}({{ product.id }})" type="radio"
                               name="select_dapart"> {{ product.name }}
                    </div>
                {% endfor %}
            </div>
            <hr>
            <div style="height: 70px;padding-right: 2%;font-size: 14px;">
                <button onclick="summit_val()" id="model-affirm2"
                        style="border-radius: 3px;height: 30px;float: right;margin-top: 15px;border: #1E90FF solid 1px;background: #1E90FF;color: white;">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;提&nbsp;交&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </button>
            </div>
        </div>
        <div style="width: 100%;height: 100%;">
            <table style="border-collapse: collapse;border-color: #DCDCDC;width: 100%;height: 100%;" cellspacing="0"
                   cellpadding="2" border="1">
                <tr>
                    <td style="text-align: right; padding-right: 15px;width: 20%;">登&nbsp;&nbsp;记&nbsp;&nbsp;人</td>
                    <td style="padding-left: 5px;width: 80%;">{{ realname }}</td>
                </tr>
                <tr>
                    <td style="text-align: right; padding-right: 15px">部&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;门</td>
                    <td style="padding-left: 5px;">{{ department }}</td>
                </tr>
                <tr>
                    <td style="text-align: right; padding-right: 15px">资产名称</td>
                    <td onclick="appear_model()" style="padding-left: 5px; cursor: pointer" id="select_depart">点击选择资产名称
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right; padding-right: 15px">资产类型</td>
                    <td>
                        <input id="product_type" type="text"
                               style="width: 100%;height: 100%;border: none;padding-left: 5px" value="办公用品" disabled>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right; padding-right: 15px">资产数量</td>
                    <td>
                        <input id="quantity" type="number"
                               style="width: 100%;height: 100%;border: none;padding-left: 5px">
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right; padding-right: 15px">记录日期</td>
                    <td><input type="text" class="jeinput_1" id="test12" placeholder="选择日期"></td>
                </tr>
                <tr>
                    <td style="text-align: right; padding-right: 15px">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</td>
                    <td>
                        <textarea name="" id="note" cols="30" rows="5"
                                  style="border: none; width: 100%; padding: 5px; outline: none"></textarea>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right; padding-right: 15px">
                        <a href="javascript:;" class="file" style="vertical-align: top;margin-top: 5px;">
                            上传图片
                            <input type="file" name="party_main_body" id="party_main_body"
                                   onchange="upload_accessory('file1', 'party_main', 'party_main_body', 'db_bh')">
                        </a>
                    </td>
                    <td id="img_info" style="height: 205px;">
                    </td>
                </tr>
            </table>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="../../static/personnel/TimeSelector/src/jedate.js"></script>
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("zichan").className = "add_class";
            document.getElementById("assets_management").className = "add-nav-active";
        };

        //自定义格式选择
        jeDate("#test12",{
            format: "YYYY-MM-DD"
        });

        //一次绑定多个选择
        var jel = document.querySelectorAll(".moredate");
        for(var j=0;j<jel.length;j++){
            var mat = jel[j].getAttribute("placeholder");
            jeDate(jel[j],{
                format: mat
            });
        }

        //一次绑定多个选择DIV类型
        var divel = document.querySelectorAll(".divmore");
        for(var j=0;j<divel.length;j++){
            var divmat = divel[j].getAttribute("placeholder");
            jeDate(divel[j],{
                format: divmat
            });
        }

        const uuid = "{{ uuid | safe }}"

        function upload_accessory(file_type, tbody_id, accessory_type, bh_id) {
            var form = new FormData();
            var files = document.getElementById(accessory_type).files[0];
            var file_str = String(files.name);
            var suffix = file_str.substring(file_str.lastIndexOf("."));
            if (suffix !== ".png" && suffix !== ".JPG" && suffix !== ".JPEG" && suffix !== ".PNG" && suffix !== ".jpg" && suffix !== ".jpeg" && suffix !== ".jfif") {
                alert("请上传图片格式！")
                return false
            }
            document.getElementById("loading").style.display = "inline-block";
            form.append(file_type, files);
            form.append('number', uuid)
            form.append("source", "zc")
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/administrative/topics_attachments_upload", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate);
                        if (JsonDate["code"] === 400) {
                            alert("请上传xlsx格式文件！")
                        }
                        create_img(JsonDate['pdf_path'], JsonDate['id']);
                        document.getElementById("party_main_body").value = "";
                    }
                }
            };
        }

        function guid() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = Math.random() * 16 | 0,
                    v = c === 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        }


        function create_img(img_path, img_id) {
            var del_id = guid();
            var but_id = guid();
            var tag = document.querySelector("#img_info");
            var div_tag = document.createElement("div");
            div_tag.className = 'div-tag';
            div_tag.id = del_id;
            var img_tag = document.createElement("img");
            img_tag.style.width = "200px";
            img_tag.style.height = "200px";
            img_tag.src = img_path;
            div_tag.setAttribute("onmousemove", "on_tag('" + but_id + "')");
            div_tag.setAttribute("onmouseout", "out_tag('" + but_id + "')");
            var p_tag = document.createElement("p");
            p_tag.className = 'p-tag';
            p_tag.id = but_id;
            var button1_tag = document.createElement("button");
            button1_tag.innerText = "-";
            button1_tag.style.display = "inline-block";
            button1_tag.style.border = 'none';
            button1_tag.style.height = '40px';
            button1_tag.style.width = "40px";
            button1_tag.style.margin = "0 5px";
            button1_tag.style.background = "rgba(176, 176, 176, 0.5)";
            button1_tag.style.verticalAlign = "top";
            button1_tag.setAttribute("onclick", "Removeimg('" + del_id + "', '"+ img_id +"')");
            var button2_tag = document.createElement("button");
            button2_tag.style.display = "inline-block";
            button2_tag.style.border = 'none';
            button2_tag.style.height = '40px';
            button2_tag.style.width = "40px";
            button2_tag.style.margin = "0 5px";
            button2_tag.style.background = "rgba(176, 176, 176, 0.5)";
            button2_tag.style.verticalAlign = "top";
            button2_tag.style.padding = "0px";
            button2_tag.innerHTML = '<a href="' + img_path + '"target="_blank" style="padding: 0;"><div style="width: 40px; height: 40px;text-align: center">+</div></a>'
            p_tag.appendChild(button1_tag);
            p_tag.appendChild(button2_tag);
            div_tag.appendChild(img_tag);
            div_tag.appendChild(p_tag);
            tag.appendChild(div_tag);
        }

        function on_tag(but_id) {
            document.getElementById(but_id).style.display = 'block';
        }

        function out_tag(but_id) {
            document.getElementById(but_id).style.display = 'none';
        }

        function Removeimg(wj_id, img_id) {
            console.log(wj_id)
            var trNode = document.getElementById(wj_id)
            trNode.parentNode.removeChild(trNode);

            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/administrative/delete_attachments_view", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send("id=" + String(img_id));
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate);
                        alert("删除成功！")
                    }
                }
            };
        }

        function appear_model() {
            document.getElementById("addForm").style.display = "inline-block";
        }

        var company_list = {{ product_objs | safe }};

        function search_dep() {
            var search_keyword = document.getElementById("search_data").value;
            var processed = document.getElementById("processed");
            processed.innerHTML = "";
            console.log(company_list.length)
            for (var h = 0; h < company_list.length; h++) {
                if (company_list[h]["name"].indexOf(search_keyword) !== -1) {
                    console.log(company_list[h]["name"])
                    var div_tag = document.createElement("div");
                    div_tag.className = "div_clase";
                    div_tag.style.fontSize = "14px";
                    div_tag.innerHTML = '<input class="check_box" id="' + company_list[h]["name"] + '(' + company_list[h]["id"] + ')' + '"name="select_dapart" type="radio"> ' + company_list[h]["name"];
                    processed.appendChild(div_tag)
                }
            }
        }

        function summit_val() {
            var cleck_box_list = document.getElementsByClassName("check_box");
            var xuanzhong = ""
            for (var t = 0; t < cleck_box_list.length; t++) {
                if (cleck_box_list[t].checked) {
                    xuanzhong = xuanzhong + cleck_box_list[t].id + ", "
                }
            }
            document.getElementById("select_depart").innerText = xuanzhong.slice(0, -2).split('(')[0];
            var product_id_0 = xuanzhong.slice(0, -2).split('(')[1].replace(")", '');
            document.getElementById("select_depart").setAttribute("name", product_id_0)
            document.getElementById("addForm").style.display = "none";
        }

        function close_models1() {
            document.getElementById("addForm").style.display = "none";
        }

        function submit_inventory() {
            var product_id = $('#select_depart').attr('name');
            var type = $("#product_type").val();
            var purchase_date = $("#test12").val();
            var note = $('textarea[id*=note]').val();
            var quantity = $('#quantity').val();
            if (!product_id) {
                alert("请选择资产名称！")
                return false
            }
            if (!type) {
                alert("请输入资产类型！")
                return false
            }
            if (!purchase_date) {
                alert("请输入记录日期！")
                return false
            }
            if (!note) {
                note = "该资产未备注信息。"
            }
            if (!quantity) {
                alert("请输入资产数量！")
                return false
            }
            var tag_li = document.getElementsByClassName('div-tag');
            if (tag_li.length === 0) {
                alert('请上传物料图片！')
                return false
            }
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;
            xhr.open('post', "/personal-center/add_asset_view", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
            xhr.send("&type=" + type + "&uuid=" + uuid + "&product_id=" + product_id + "&purchase_date=" + purchase_date + "&note=" + note + "&quantity=" + quantity)
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        alert("创建成功！")
                        window.location.href = "/personal-center/property_register_view";
                        document.getElementById("loading").style.display = "none";
                    }
                }
            }
        }

    </script>
{% endblock %}